<template>
  <div class="index-block index-bg">
    <div class="container mx-auto flex">
      <div class="w-1/2 text-white pt-32">
        <h1 class="page-main-title mb-6">快速选址、精准对接</h1>
        <div class="mb-5 text-2xl">互联网+AI技术，提升政府、园区、企业对接效率！</div>
        <!-- <div class="text-sm">
          我们通过大数据和AI技术赋能产业创新，为政府产业招商 / 园区数字运营 /
        </div> -->
        <!-- <div class="text-sm">企业智能销售 / 提供全流程解决方案。</div> -->
      </div>
      <div class="w-1/2 pt-8 pr-8 flex justify-end">
        <div class="bg-white rounded contact-form p-6">
          <div class="text-index-title font-semibold text-xl mb-5">快速联系</div>
          <el-form ref="form" :model="formValue" :rules="formRules">
            <el-form-item size="small" prop="selectedValue">
              <el-checkbox-group v-model="formValue.selectedValue" @change="onSelectedValueChange">
                <el-checkbox v-for="option in selectedOptions" :key="option" :label="option">{{
                  option
                }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item prop="name">
              <el-input
                v-model="formValue.name"
                prefix-icon="el-icon-user"
                placeholder="输入联系人"
              ></el-input>
            </el-form-item>
            <el-form-item prop="phoneNumber">
              <el-input
                v-model="formValue.phoneNumber"
                prefix-icon="el-icon-phone-outline"
                placeholder="联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item prop="companyName">
              <el-input
                v-model="formValue.companyName"
                prefix-icon="el-icon-office-building"
                placeholder="单位名称"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button class="w-full" type="primary" @click="submit">提交</el-button>
        </div>
      </div>
    </div>
    <!-- <div>
      <h1 class="title">首页</h1>

      <nuxt-link to="/login">登录</nuxt-link>
    </div> -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  auth: false,
  data() {
    return {
      formValue: {
        name: '',
        phoneNumber: '',
        companyName: '',
        selectedValue: ['企业选址'],
      },
      selectedOptions: ['企业选址', '园区认证', '商协会入驻'],
      formRules: {
        name: [
          {
            required: true,
            message: '请输入联系人',
          },
        ],
        phoneNumber: [
          {
            required: true,
            message: '请输入联系电话',
          },
        ],
        companyName: [
          {
            required: true,
            message: '请输入单位电话',
          },
        ],
        selectedValue: [
          {
            required: true,
            message: '请选择一个服务项目',
          },
        ],
      },
      // NODE_ENV: process.env.NODE_ENV,
    }
  },
  methods: {
    onSelectedValueChange() {},
    submit() {
      this.$refs.form.validate((valid) => {
        console.log(valid)
        if (valid) {
          console.log(this.formValue)
        }
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.index-block {
  .page-main-title {
    font-size: 42px;
    line-height: 50px;
    color: #ffffff;
  }
  .contact-form {
    height: 386px;
    width: 366px;
    background-color: #ffffff;
  }
}
.index-bg {
  background-color: #005ad9;
  background-image: url(@/assets/img/index/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 450px;
}
</style>
